<template>
	<view class="guess">
		<view class="guess-section">
			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="detail(item.pid,item.iShopId)">
				<view class="image-wrapper">
					<image :src="item.defaultAlbum" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.pName}}</text>
				<text class="price">
					<text class="unit">￥</text>
					<text v-if="item.productAttribute == 2">{{item.detail_salePoints}} </text>
					<text v-if="item.productAttribute == 1">{{item.fSalePrice}} </text>
					<image class="collect" src="/static/img/2/2-13.png" mode="aspectFill"></image>

				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "guess",
		props:["goodsList"],
		data() {
			return {
				
			}
		},
		methods:{
			detail(id,shop_id){
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${shop_id}`
				})
			}
		}


	}
</script>

<style lang="scss">
	.f-header {
		display: flex;
		align-items: center;
		height: 140upx;
		padding: 6upx 30upx 8upx;

		.tit-box {
			flex: 1;
			display: flex;
			// flex-direction: column;
			justify-content: center;
			align-items: center;

			.tit {
				display: inline-block;
				font-size: 27upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin: 0 10upx;
			}

			.line {
				display: inline-block;
				width: 52upx;
				height: 2upx;
				background: rgba(102, 102, 102, 1)
			}
		}


	}

	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 29upx;
			background: #fff;
			margin-bottom: 21upx;
			box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08);

			&:nth-child(2n+1) {
				margin-right: 4%;
			}

		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			background: #fff;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: 23upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(68, 68, 68, 1);
			line-height: 35upx;
			padding-left: 30upx;
			padding-right: 30upx;
			margin-top: 10upx;
		}

		.price {
			font-size: 26upx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: rgba(240, 64, 111, 1);
			padding-left: 30upx;
			position: relative;

			.pay {
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				margin-left: 30upx;
			}

			.collect {
				position: absolute;
				right: 29upx;
				bottom: 10upx;
				width: 30upx;
				height: 28upx;
				z-index: 1;
			}

		}


	}
</style>
